<template>
	<div class="x">
	<div class="choicesx">
	<div class="choices">
        <div @click="myone($event,0)" data-target="false"><p :class="{red:tab==0}">区域<span >▼</span></p></div>
		<div @click="myone($event,1)" data-target="false"><p :class="{red:tab==1}">价格<span>▼</span></p></div>
		<div @click="myone($event,2)" data-target="false"><p :class="{red:tab==2}">房型<span>▼</span></p></div>
		<div @click="myone($event,3)" data-target="false"><p :class="{red:tab==3}">更多<span>▼</span></p></div>
	</div>
		</div>
	<div class="choice-list" v-if="tab == 0">
		<div class="choice-left">
			<p>区域  </p>
		</div>
		<div class="choice-rith">
			<ul>
				<li><router-link :to="{path:'/lideta/addre',query:{values:'不限',idx:'1'}}">不限</router-link></li>
				<li><router-link :to="{path:'/lideta/addre',query:{values:'江北',idx:'1'}}">江北</router-link></li>
				<li><router-link :to="{path:'/lideta/addre',query:{values:'渝北',idx:'1'}}">渝北</router-link></li>
				<li><router-link :to="{path:'/lideta/addre',query:{values:'南岸',idx:'1'}}">南岸</router-link></li>
				<li><router-link :to="{path:'/lideta/addre',query:{values:'巴南',idx:'1'}}">巴南</router-link></li>
				<li><router-link :to="{path:'/lideta/addre',query:{values:'沙坪坝',idx:'1'}}">沙坪坝</router-link></li>
				<li><router-link :to="{path:'/lideta/addre',query:{values:'九龙坡',idx:'1'}}">九龙坡</router-link></li>
				<li><router-link :to="{path:'/lideta/addre',query:{values:'渝中',idx:'1'}}">渝中</router-link></li>
				<li><router-link :to="{path:'/lideta/addre',query:{values:'大渡口',idx:'1'}}">大渡口</router-link></li>
				<li><router-link :to="{path:'/lideta/addre',query:{values:'江津',idx:'1'}}">江津</router-link></li>
				<li><router-link :to="{path:'/lideta/addre',query:{values:'北碚',idx:'1'}}">北碚</router-link></li>
				<li><router-link :to="{path:'/lideta/addre',query:{values:'秀山土家族苗族自治县',idx:'1'}}">秀山土家族苗族自治县</router-link></li>
				<li><router-link :to="{path:'/lideta/addre',query:{values:'忠县',idx:'1'}}">忠县</router-link></li>
			</ul>
		</div>
	</div>
	<div class="choice-money" v-if="tab == 1">
		<ul>
			<li><router-link :to="{path:'/lideta/addre',query:{values:'不限',idx:'2'}}">不限</router-link></li>
			<li><router-link :to="{path:'/lideta/addre',query:{values:'小于1000元',idx:'2'}}">小于1000元</router-link></li>
			<li><router-link :to="{path:'/lideta/addre',query:{values:'大于1000元',idx:'2'}}">大于1000元</router-link></li>
			<li><router-link :to="{path:'/lideta/addre',query:{values:'大于2000元',idx:'2'}}">大于2000元</router-link></li>
			<li><router-link :to="{path:'/lideta/addre',query:{values:'大于3000元',idx:'2'}}">大于3000元</router-link></li>
			<li><router-link :to="{path:'/lideta/addre',query:{values:'大于5000元',idx:'2'}}">大于5000元</router-link></li>
		</ul>
	</div>
	<div class="choice-box" ref="table" v-if="tab == 2">
		<ul>
			<li><label><p>一室</p><input type="checkbox" class="selBtn" value="一室"/></label></li>
			<li><label><p>二室</p><input type="checkbox" class="selBtn" value="二室"/></label></li>
			<li><label><p>三室</p><input type="checkbox" class="selBtn" value="三室"/></label></li>
			<li><label><p>四室</p><input type="checkbox" class="selBtn" value="四室"/></label></li>
			<li><label><p>五室</p><input type="checkbox" class="selBtn" value="五室"/></label></li>
			<li><label><p>五室以上</p><input type="checkbox" class="selBtn" value="五室以上"/></label></li>
		</ul>
		<div class="choice-box-btn" @click="getValues"><p>确认<p/></div>
	</div>
	<div class="more" v-if="tab == 3">
		<p>面积</p>
		<ul>
			<li><router-link :to="{path:'/lideta/addre',query:{values:'不限',idx:'4'}}">不限</router-link></li>
			<li><router-link :to="{path:'/lideta/addre',query:{values:'30平米以下',idx:'4'}}">30平米以下</router-link></li>
			<li><router-link :to="{path:'/lideta/addre',query:{values:'30平米-50平米',idx:'4'}}">30平米-50平米</router-link></li>
			<li><router-link :to="{path:'/lideta/addre',query:{values:'50平米-90平米',idx:'4'}}">50平米-90平米</router-link></li>
			<li><router-link :to="{path:'/lideta/addre',query:{values:'90平米-150平米',idx:'4'}}">90平米-150平米</router-link></li>
			<li><router-link :to="{path:'/lideta/addre',query:{values:'150平米以上',idx:'4'}}">150平米以上</router-link></li>
		</ul>
		
	</div>
	</div>

</template>

<script>
export default {
	name: 'choice',
	data() {
		return {
			tab:5
		};
	},methods:{
		myone(e,index){
			var div = e.currentTarget.parentNode.children;
			for(var i =0;i<div.length;i++){
				if(index != i){
					div[i].setAttribute("data-target","false");
				}
			}
			var attr = e.currentTarget.getAttribute("data-target");
			if(attr == "false"){
				e.currentTarget.setAttribute("data-target","true");
				this.tab=index;
			}else{
				e.currentTarget.setAttribute("data-target","false");
				this.tab=5;
			}
			
		},
		getValues(){
			var _this=this;
			var checkDom=_this.$refs.table.getElementsByClassName("selBtn");
			var values=[];
			for(var i=0;i<checkDom.length;i++){
				if(checkDom[i].checked){
					values.push(checkDom[i].value)
				}
			}
			this.$router.push({path:'/lideta/addre',query:{idx:'3',values}});
		}
	}
};
</script>

<style scoped="scoped">
.x {
	position: relative;
	z-index: 9999;
	
}
.red{
	color: #008AFF;
}
.choicesx {
	width: 100%;
	height: auto;
	border-bottom: 1px solid gainsboro;
	box-sizing: border-box;
}
.choices {
	width: 7rem;
	height: 0.8rem;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
}
.choices > div {
	font-size: 0.3rem;
	color: gray;
	width: 1rem;
	height: 0.3rem;
}
.choices > div > p > span {
	font-size: 0.12rem;
	color: gainsboro;
}
.choice-list {
	width: 100%;
	height: 6rem;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid gainsboro;
	position: absolute;
	top: 0.82rem;
	left: 0;
	
}
.pop{
	position: absolute;
	top: 0;
	left: 0;
}
.choice-list > div {
	width: 50%;
	height: 100%;
}
.choice-left {
	background: gainsboro;
	border-right: 1px solid gainsboro;
}
.choice-left > p {
	width: 100%;
	height: 0.8rem;
	line-height: 0.8rem;
	font-size: 0.3rem;
	text-align: center;
	background: white;
}
.choice-rith {
	overflow-y: hidden;
	overflow-y: scroll;
	background: white;
}
.choice-rith > ul {
	width: 100%;
	height: auto;
}
.choice-rith > ul > li {
	width: 3.2rem;
	height: 0.8rem;
	line-height: 0.8rem;
	float: right;
	font-size: 0.3rem;
	border-bottom: 1px solid gainsboro;
}
.choice-rith>ul>li>a{
	display: block;
	width: 100%;
	height: 100%;
}
.choice-money {
	width: 100%;
	height: 6rem;
	border-bottom: 1px solid gainsboro;
	background: white;
	position: absolute;
	top: 0.82rem;
	left: 0;
	
}
.choice-money > ul {
	width: 100%;
	height: auto;
}
.choice-money > ul > li {
	width: 7rem;
	height: 0.9rem;
	line-height: 0.9rem;
	border-bottom: 1px solid gainsboro;
	float: right;
	font-size: 0.35rem;
	
}
.choice-box{
	width: 100%;
	height: 6rem;
	border-bottom: 1px solid gainsboro;
	background: white;
	position: absolute;
	top: 0.82rem;
	left: 0;
	
	
}
.choice-box>ul{
	width: 100%;
	height: auto;
}
.choice-box>ul>li>label{
	width: 7rem;
	height: 0.8rem;
    margin: auto;
	border-bottom: 1px solid  gainsboro;
	line-height: 0.8rem;
	display: flex;align-items: center;
	justify-content: space-between;
	font-size: 0.3rem;
}
.choice-box>ul>li>label input{
	width: 0.3rem;
	height: 0.3rem;
}
.choice-box-btn{
	width: 100%;
	height: 1.2rem;
	background: #007AFF;
	text-align: center;
	line-height: 1.2rem;
	font-size: 0.4rem;
	color: white;
}
.more{
	width: 100%;
	height: 6rem;
	background: white;
	position: absolute;
	top: 0.82rem;
	left: 0;
	
	}
	.more>p{
		width: 7rem;
		height: 0.8rem;
		font-size: 0.4rem;
		margin: auto;
	}
	.more>ul{
		width: 7rem;
		height: auto;
		margin: auto;
	}
	.more>ul>li{
		width: 7rem;
		height: 0.8rem;
		font-size: 0.3rem;
		border-bottom:1px solid gainsboro;
		line-height: 0.8rem;
	}
</style>
